<template>
  <cost-consum-page
    type="energyConsume"
    :queryFormItem="queryFormItems"
    :collapseFormItem="collapseFormItems"
    @queryPush="queryPush"
    @workShopName="workShopName"
  />
</template>

<script>
import costConsumPage from '../components/costConsumPage.vue'
import mixin from "@/pages/components/mixins/mixin";

export default {
  components: { costConsumPage },
  mixins: [mixin],
  computed: {
    queryFormItem() {
      return [
        {
          key: "searchType",
          title: {
            "zh-CN": "查找类型",
            "en-US": "searchType",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.searchOptions },
        },
        {
          key: "scale",
          title: {
            "zh-CN": "粒度",
            "en-US": "scale",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.scaleOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
      ];
    },
    collapseFormItem() {
      return [
        {
          key: "searchType",
          title: {
            "zh-CN": "查找类型",
            "en-US": "searchType",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.searchOptions },
        },
        {
          key: "scale",
          title: {
            "zh-CN": "粒度",
            "en-US": "scale",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.scaleOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
      ];
    },
    geography() {
      return [
        {
          key: "workshop",
          title: {
            "zh-CN": "车间",
            "en-US": "workshop",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.workOptions },
        },
        {
          key: "equipment",
          title: {
            "zh-CN": "设备",
            "en-US": "equipment",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.equipOptions },
        }
      ]
    }
  },
  data() {
    return {
      queryFormItems: [],
      collapseFormItems: [],
      equipOptions: [],
      searchOptions: [
        { label: "按能源查找", value: "energyType" },
        { label: "按能耗查找", value: "energyConsume" },
      ],
      scaleOptions: [
        { label: "分", value: "分" },
        { label: "时", value: "时" },
        { label: "天", value: "天" },
        { label: "月", value: "月" },
        { label: "年", value: "年" },
      ],
      workOptions: [
        { label: '中粗粉车间', value: '中粗粉车间' },
        { label: '超细粉车间', value: '超细粉车间' },
        { label: '气体站', value: '气体站' }
      ],
    }
  },
  created() {
    this.queryFormItems = this.queryFormItem
    this.collapseFormItems = this.collapseFormItem
  },
   methods: {
    queryPush(flag) {
      this.queryFormItems = structuredClone(this.queryFormItem)
      this.collapseFormItems = structuredClone(this.collapseFormItem)
      if(flag === 'energyConsume') {
        this.queryFormItems.push(...this.geography)
        this.collapseFormItems.push(...this.geography)
      }
    },
    workShopName(val) {
      // 拿到车间名
      let obj = { workshop: val }
      this.$api.Custom.getEquipByWorkShop(obj).then((res) => {
        if (!res) {
          return;
        }
        let arr = res.map(item => {
          return {
            label: item.values.sf_name,
            value: item.id
          }
        })
        this.equipOptions = arr
        this.queryPush('energyConsume')
      });
    },
  }
}
</script>

<style scoped lang="scss">

</style>
